<template>
  <div>
    <div id="cirChart" style="width: 100%;height: 350px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "circular-diagram",
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let dom = document.getElementById("cirChart");
      let chart = echarts.init(dom);
      chart.setOption(this.getOptions());
    },
    getOptions() {
      return {
        title: {
          text: '所有订单统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '当前所有',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '询价订单' },
              { value: 735, name: '报价订单' },
              { value: 580, name: '回收订单' },
              { value: 484, name: '退货订单' },
              { value: 300, name: '追差订单' }
            ]
          }
        ]
      }
    },
  }
}
</script>

<style scoped lang="scss">

</style>
